<template>
	  <el-carousel height="100vh"
	   indicator-position="none"
	   arrow='never'
	   >
		<el-carousel-item v-for="item in dateImg" :key="item">
			<img :src=item.img alt=""/>
		</el-carousel-item>
	  </el-carousel>
	  <!-- 注册框-->
	<div class="box">
		<div class="min-box">
		  <el-form :model="form" label-width="120px" style="width: 100%;">
				<P style="margin-bottom: 10px;">注 册</P>
				<el-form-item label="账号">
					<el-input v-model="form.name" placeholder="请输入您的昵称"/>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.password" type="password" show-password placeholder="请输入您的密码"/>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="form.repassword" type="password" show-password placeholder="请确认您的密码"/>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="form.tel" type="number" placeholder="请输入您的手机号"/>
				</el-form-item>
				<el-form-item label="学校">
					<el-input v-model="form.school" placeholder="请输入您的学校"/>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address" placeholder="请输入您的地址"/>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input v-model="form.code" placeholder="请输入验证码" style="width: 50%;"/>
					<img :src="kaptchaImg" @click="changeCode" style="width: 30%;height: 90%;margin-left: 10px;border-radius: 10px;" alt="验证码"/>
				</el-form-item>
				<el-button type="primary" @click="register">注册</el-button>
				
		  </el-form>	
				<p style="text-align: center;">
					 <el-link  type="info"><router-link to="/?k=true">去登录</router-link></el-link>
				</p>
		</div> 
	</div>
</template>
<script setup>
import { onMounted, reactive, ref ,getCurrentInstance} from 'vue';
import  Api  from "../api"
const {proxy} = getCurrentInstance()
const kaptchaImg = ref('')
const changeCode=()=>{
	// Api.codeApi().then(res=>{
	// 	console.log(res.data)
	// 	kaptchaImg.value='data:image/png;base64'+res.data
	// })
	kaptchaImg.value="http://127.0.0.1:8080/kaptcha?time="+ new Date()
}

onMounted(()=>{
		kaptchaImg.value="http://127.0.0.1:8080/kaptcha?time="+ new Date()
	})

const centerDialogVisible=ref(true)
const form =reactive({
	name:'',
	password:'',
	repassword:'',
	tel:'',
	school:'',
	address:'',
	code:''
})
const register =()=>{
	if(form.name==''||form.password==''||form.address==''||form.school==''||form.tel==''||form.code==''){
		return proxy.$message.error('内容不能为空');
	}else if(form.password!=form.repassword){
		return proxy.$message.error('两次密码输入不一致');
	}else{
		Api.registerApi(form).then(res=>{
			if(res.data.status==200){
				proxy.$message.success(res.data.msg);
			}else{
				proxy.$message.error(res.data.msg);
			}
				
		})
	}
		
	
}

	const dateImg = reactive([
		{
			"img":"src/assets/l1.png"
		},
		{
			"img":"src/assets/l2.png"
		},
		{
			"img":"src/assets/l3.png"
		},
		{
			"img":"src/assets/l4.png"
		}
	])

</script>

<style scoped>
	.box{
		width: 500px;
		margin: 0 auto;
		position:relative;
	}
	
	.min-box{
		text-align: center;
		width: 400px;
		top: 150px;
		position: fixed;
		border-radius: 10px;
		background-color: #ececec;
		padding: 10px 20px;
		z-index: 99;
	}
	.el-carousel{
		 width: 100%;
		height: 100vh;
	}
	.el-carousel img{
		width: 100%;
		height: 100%;
	}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
